<template>
	<view class="zone">
		<Header title="发布求购"></Header>
		<view class="main">
			<image class="yun" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"></image>

			<!-- 丹药 装备 法器 道侣 阵法 -->
			<view class="tabs">
				<view :class="['tab',stat2==item.id?'act':'']" v-for="(item,index) in tablist2" :key="index"
					@click="tabchange(item.id,index)">
					{{item.name}}
				</view>
			</view>

			<!-- 滑动选择数据 -->
			<scroll-view scroll-x class="scrolltop">
				<view class="t_list">
					<view :class="['item',stat3 == item.type?'c_active':'']" v-for="(item , index) in shaiList[stat2]"
						:key="index" @click="thingtab(index,item.type)">
						{{item.name}}
					</view>
				</view>
			</scroll-view>

			<image class="ping1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>
			<view class="boxinfo">

				<scroll-view scroll-x class="danyao">
					<view class="sboxa">
						<view :class="['imgbox',stat4==index+1 ?'act':'']" v-for="(item,index) in tablist3"
							:key="item.id" @click="tanchanger(item,index)">
							<image class="img" :src="item.img" mode="widthFix"></image>
							<text class="imhnum2">{{item.name}}</text>
						</view>
						<view class="zanwu" v-if="tablist3.length==0">
							该分类没有任何物品
						</view>
					</view>
				</scroll-view>

				<view class="iptboxn">
					<view class="sp">
						求购数量
					</view>
					<view class="inpt">
						<input type="number" placeholder-class="pipt" class="ipti" v-model="shuliang"
							placeholder="请输入数量">
					</view>
					<view class="sp">
						求购单价
					</view>
					<view class="inpt">
						<input type="number" :positiveInteger='false' placeholder-class="pipt" class="ipti"
							v-model="danjia" placeholder="请输入单价">
					</view>


					<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="fachubtn"
						@click="chushou">上架求购</u-button>

				</view>

				<view class="explain">
					<p>1.每个求购的道具最多只能发布24小时，24小时之后自动下架。</p>
					<p>2.求购成功后会扣除一定比例的手续费进行销毁。</p>
					<p>3.最多只能发布10条求购订单。</p>
					<p>4.完成实名认证并且游戏达到等级可解锁市场。</p>
				</view>



			</view>


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stat2: 1,
				stat3: 2, //滑动列表选中
				stat4: '', //
				stat5: '', //
				tanType: '', //
				backpack_id: '', //
				tablist1: [],
				tablist2: [],
				tablist3: [],
				shaiList: {
					1: [],
					2: [],
					3: [],
					4: [],
					5: [],
				}, // 筛选实物列表
				shuliang: '',
				danjia: '',

			}
		},
		onLoad() {
			this.getList()
			this.sellList()
		},
		onShow() {

		},
		methods: {
			// 请求 丹药 装备 法器 道侣 阵法 列表
			async getList() {
				let res = await this.$http.index.marketCate()
				if (res.code == 1) {
					this.tablist2 = res.data
				}
				let prizeIndex = this.tablist2.findIndex(item => {
					return item.id === this.stat2
				})
				this.stat3 = this.tablist2[prizeIndex].cate[0].type
				this.tradeList(this.stat2, this.stat3)
			},
			// 丹药 装备 法器 道侣 阵法 第一层
			tabchange(id) {
				this.stat2 = id;
				let prizeIndex = this.tablist2.findIndex(item => {
					return item.id === this.stat2
				})
				this.stat3 = this.tablist2[prizeIndex].cate[0].type
				this.stat4 = ''
				this.tradeList(this.stat2, this.stat3)
				this.sellList();
				this.danjia = ''
				this.shuliang = ''
			},
			// 第二层
			thingtab(index, type) {
				this.stat3 = this.tablist2[this.stat2 - 1].cate[index].type
				this.stat4 = ''
				this.sellList();
				this.danjia = ''
				this.shuliang = ''
			},
			// 请求道具列表
			async tradeList(type, index) {
				this.shaiList[type] = this.tablist2[this.stat2 - 1].cate
				this.stat3 = this.tablist2[this.stat2 - 1].cate[0].type
			},
			// 获取求购图片
			async sellList() {
				let res = await this.$http.index.marketProps({
					cate: this.stat2,
					type: this.stat3
				})
				if (res.code == 1) {
					this.tablist3 = res.data
				}
			},
			// 第三层
			tanchanger(item, index) {
				this.stat4 = index + 1
				this.stat5 = item.id || item.kit_id || item.faqi_id
				this.tanType = this.stat2 == 2 ? 1 : this.stat2 == 3 ? 2 : 0
				// this.backpack_id = item.backpack_id ? item.backpack_id : 0
				this.danjia = ''
				this.shuliang = ''
				console.log(item);
			},
			// 发布求购
			async chushou() {
				if (this.shuliang == '' || this.shuliang == null) {
					this.$u.toast('请输入数量')
					return
				}
				if (this.shuliang >= 9999) {
					this.$u.toast('单次数量过大！')
					return
				}
				if (this.stat2 == 2 || this.stat2 == 3) {
					if (this.shuliang > 1) {
						this.$u.toast('装备与法器只能单个求购')
						return
					}
				}
				if (this.danjia == '' || this.danjia == null) {
					this.$u.toast('请输入价格')
					return
				}
				if (this.danjia >= 9999) {
					this.$u.toast('单次数量过大！')
					return
				}
				console.log(this.stat5, this.shuliang, this.danjia, this.tanType, this.backpack_id);
				let res = await this.$http.index.marketPublishwantbuy({
					item_id: this.stat5,
					num: this.shuliang,
					price: this.danjia,
					type: this.tanType
				})
				if (res.code == 1) {
					this.getList()
					this.sellList()
					this.stat4 = ''
				}
				this.$u.toast(res.msg)
			}
		},

	}
</script>

<style lang="less">
	.zone {
		min-height: 100vh;
		background: url(http://image.qxgm.site/tdz/img/public/p_bg.png) no-repeat;
		background-size: 100% auto;
	}

	.main {
		width: 100%;
		position: relative;
	}

	.yun {
		width: 44%;
	}

	.tabs {
		width: 100%;
		padding: 8px 9px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: url(http://image.qxgm.site/tdz/img/team/mg-06.png) no-repeat;
		background-size: 100% 100%;

		.tab {
			width: 19%;
			background: url(http://image.qxgm.site/tdz/img/daolv/smg-05.png) no-repeat;
			background-size: 100% 100%;
			text-align: center;
			font-size: 14px;
			font-weight: normal;
			color: #FFFED0;
			line-height: 27px;
			margin-right: 5px;
		}

		.act {
			color: #A97D45;
			background: url(http://image.qxgm.site/tdz/img/daolv/smg-04.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	// 滑动选择数据

	.scrolltop {
		width: calc(100% - 18px);
		padding: 0 9px;
		white-space: nowrap;
		margin-top: 4px;

		.t_list {
			display: flex;
			align-items: center;

			.c_active {
				background: url(http://image.qxgm.site/tdz/img/market/mg-05.png) no-repeat !important;
				background-size: 100% 100% !important;
			}

			.item {
				width: 70px;
				font-size: 13px;
				color: #A56E47;
				padding: 8px 0 12px;
				font-weight: normal;
				line-height: 13px;
				text-align: center;
				margin-right: 6px;
				background: url(http://image.qxgm.site/tdz/img/market/mg-04.png) no-repeat;
				background-size: 100% 100%;
			}

		}
	}

	.ping1 {
		width: 100%;
		display: flex;
	}

	.boxinfo {
		height: calc(100vh - 215px);
		overflow-y: scroll;
		background: url(http://image.qxgm.site/tdz/img/public/ping2.png);
		background-size: 100% auto;
		padding: 0 5px;
	}

	.fachubtn {
		margin: 18px auto;
		width: 116px;
		height: 37px !important;
		text-align: center;
		font-size: 16px;
		color: #fef7c8;
		text-shadow: 0 1px 1px #CB6500;
		line-height: 37px !important;
		font-weight: normal;
		background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
		background-size: 100% 100%;
	}

	.danyao {
		background: url(http://image.qxgm.site/tdz/img/market/mg-07.png) no-repeat;
		background-size: 100% 100%;
		padding: 8px;
		box-sizing: border-box;

		.sboxa {
			display: flex;
			align-items: center;
		}

		.imgbox {
			position: relative;
			width: 18%;
			background: url(http://image.qxgm.site/tdz/img/liandan/tanbg.png) no-repeat;
			background-size: 100% 100%;
			box-sizing: border-box;
			padding: 1px 4px;
			margin-right: 6px;

			.img {
				width: 100%;
			}

			.imhnum {
				position: absolute;
				bottom: 5px;
				right: 5px;
				color: #fff;
			}

			.imhnum2 {
				width: 100%;
				position: absolute;
				text-align: center;
				zoom: 0.92;
				bottom: 5px;
				font-size: 12px;
				left: 50%;
				transform: translateX(-50%);
				color: #fff;
			}
		}

		.act {
			filter: grayscale(100%);
			opacity: 0.5;
		}
	}


	.iptboxn {
		padding: 26px 26px 0;

		.sp {
			font-size: 18px;
			font-weight: normal;
			color: #333333;
			line-height: 24px;
			margin-bottom: 12px;
		}

		.inpt {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #bcb8ba;
			border: 1px solid rgba(51, 51, 51, 0.95);
			border-radius: 1px;
			margin: 0 0px 12px;
			padding: 12px 0;
			box-sizing: border-box;
			width: 100%;
		}

		.pipt {
			font-size: 17px;
			text-align: center;
			width: 100%;
		}

		.ipti {
			width: 100%;
			text-align: center;
		}
	}

	.explain {
		padding: 0 20px;
		font-weight: normal;
		font-size: 15px;
		color: #333333;
		line-height: 20px;

		p {
			margin-bottom: 6px;
		}
	}
</style>